<template>
    <div>
        <headers></headers>
        <div class="guo">
            <!-- 瓜果列表 -->
            <span @click="dianClick"  class="gx" v-for="(i,s) in sg" :key="s" :style="ding==i?xian:''">{{i}}</span>
        </div>
        <eat v-for="(s,i) in 5" :key="i"></eat>
    </div>
</template>

<script>
import Headers from "../compontents/Headers.vue";
import eat from "../compontents/eat.vue";
export default {
    data(){
        return{
            sg:["浆果类","瓜果类","橘果类","核果类","仁果类"],
            bian:true,
            ding:"浆果类"
        }
    },
    methods:{
        dianClick(){
            // if()
            this.ding = arguments[0].explicitOriginalTarget.data;
        }
    },
    computed:{
        xian(){
            if(this.bian){
                return "border-bottom: 2px solid #6ddac9;color: #6ddac9;";
            }
        }
    },
    components:{
        Headers,
        eat,
    },
}
</script>

<style scoped>
    .guo{
        text-align: center;
        /* padding-bottom: 3vw; */
        border-bottom: 1px solid #f2f2f2;
        box-sizing: border-box;
    }
    span{
        margin-left: 4vw;
        color: rgb(76, 76, 76);
        font-size: 5vw;
        cursor: pointer;
    }
    span:nth-of-type(1){
        margin-left: 0vw;
    }
    .gx{
        margin-top: 3vw;
        padding-bottom: 3vw;
    }
    .tong{
        border-bottom: 2px solid #6ddac9;
        color: #6ddac9;
    }
</style>
